<template>

	<!--<div class="screen_wrap2 echarts_box flex_wrap">
		<title2 title="近一年接入企业与点位累计数"></title2>
	</div>-->
	
	<div class="screen_wrap2">
        <!--<corner></corner>-->
        <title2 title="近一年接入企业与点位累计数"></title2>
        
        
        <div class="wrap2body">
        	<corner></corner>
        	<e-chart autoresize :options="option" style="height: 100%;"></e-chart>
        </div>
        
		<!--<div class="flex_body">
			<e-chart autoresize :options="option" style="height: 100%;"></e-chart>
		</div>-->
	</div>	
</template>
<script>
	import { getDeptAndSiteNum } from "@/api/bigScreen/bigScreen";
	import corner from '../public/corner'
	import title2 from '../public/title2'		
	export default {
		components: {
			corner,title2
		},				
		data() {
			return {
				option: null,
				xData:[],
				deptNum:[],
				siteNum:[],
				deptRate:[],
				siteRate:[]
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			init() {
				getDeptAndSiteNum().then(res=>{
					res.data.data.forEach(item=>{
						this.xData.push(item.date)
						this.deptNum.push(item.deptNum)
						this.siteNum.push(item.siteNum)
						this.deptRate.push(item.deptRate)
						this.siteRate.push(item.siteRate)
					})
					
					this.option = {
						grid: {
							top: "30%",
							bottom: "10%"
						},	
						tooltip: {
							trigger: "axis",
							extraCssText:'white-space:pre-wrap;padding:10px;line-height:25px',
						    formatter: function (params, ticket, callback) {
						        let arr=[]
						        params.forEach(item=>{
						        	if(item.seriesType=="line"){
						        		arr.push(`${item.seriesName}: ${item.value}%`)
						        	}else if(item.seriesType=="bar"){
						        		arr.push(`${item.seriesName}: ${item.value}`)
						        	}
						        	
						        })
						        return arr.join('\n');
						    },							
							axisPointer: {
								type: "shadow",
								label: {
									show: true
								}
							}
						},
						legend: {
							data: ['点位数环比增长率', '企业数环比增长率', '企业总数', '点位总数'],
							left:'45%',
							top: "10%",
							right: '10',
							textStyle: {
								color: this.$fontColor,
								fontSize: 12
							}
						},
						xAxis: {
							data: this.xData,
							axisLine: {
								show: true, //隐藏X轴轴线
								lineStyle: {
									color: '#26D9FF',
									width: 2
								}
							},
							axisTick: {
								show: true //隐藏X轴刻度
							},
							axisLabel: {
								show: true,
								textStyle: {
									color: this.$fontColor, //X轴文字颜色
									fontSize: 12
								}
							},
	
							splitArea: {
								show: false,
								areaStyle: {
									color: ["rgba(250,250,250,0.1)", "rgba(250,250,250,0)"]
								}
							}
						},
						yAxis: [{
								type: "value",
								splitLine: {
									show: false
								},
								axisTick: {
									show: true
								},
								axisLine: {
									show: true,
									lineStyle: {
										color: '#26D9FF',
										width: 2
									}
								},
								axisLabel: {
									show: true,
									textStyle: {
										color: this.$fontColor,
										fontSize: 12
									}
								},
	
							},
							{
								type: "value",
								position: "right",
								splitLine: {
									show: false
								},
								axisTick: {
									show: false
								},
								axisLine: {
									show: false
								},
								axisLabel: {
									show: true,
									formatter: "{value} %", //右侧Y轴文字显示
									textStyle: {
										color: this.$fontColor,
										fontSize: 12
									}
								}
							}
						],
						series: [{
								name: "点位数环比增长率",
								type: "line",
								yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
								smooth: true, //平滑曲线显示
								showAllSymbol: true, //显示所有图形。
								symbol: "circle", //标记的图形为实心圆
								symbolSize: 8, //标记的大小
								itemStyle: {
									// 折线拐点标志的样式
									color: "#AB70CD",
									borderColor: "#AB70CD",
									width: 1,
									shadowColor: "#AB70CD",
									shadowBlur: 2
								},
								lineStyle: {
									color: "#e176ff",
									width: 1,
									shadowColor: "#e176ff",
									shadowBlur: 2
								},
								data: this.siteRate,
							},
							{
								name: "企业数环比增长率",
								type: "line",
								yAxisIndex: 1,
								smooth: true,
								showAllSymbol: true,
								symbol: "circle",
								symbolSize: 8,
								itemStyle: {
									color: "#395fff",
									borderColor: "#395fff",
									width: 1,
									shadowColor: "#395fff",
									shadowBlur: 2
								},
								lineStyle: {
									color: "#6D63F5",
									width: 1,
									shadowColor: "#6D63F5",
									shadowBlur: 2
								},
								areaStyle: {
									color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
											offset: 0,
											color: "rgba(61,126,235, 0.5)"
										},
										{
											offset: 1,
											color: "rgba(61,126,235, 0)"
										}
									])
								},
								data: this.deptRate,
							},
							{
								name: "企业总数",
								type: "bar",
								barWidth: 15,
								itemStyle: {
									normal: {
										color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
												offset: 0,
												color: "rgba(134,180,255,1)"
											},
											{
												offset: 1,
												color: "rgba(23,61,142,0)"
											}
										]),
										borderColor: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
												offset: 0,
												color: "rgba(160,196,225, 1)"
											},
											{
												offset: 1,
												color: "rgba(61,126,235, 1)"
											}
										]),
										borderWidth: 2
									}
								},
								data: this.deptNum
							},
							{
								name: "点位总数",
								type: "bar",
								barWidth: 15,
								itemStyle: {
									normal: {
										color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
											offset: 0,
											color: 'rgba(88,231,255,1)'
										}, {
											offset: 1,
											color: 'rgba(27,99,116,0)'
										}]),
										borderColor: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
											offset: 0,
											color: 'rgba(180,240,255,1)'
										}, {
											offset: 1,
											color: 'rgba(15,197,243,1)'
										}]),
										borderWidth: 2
									}
								},
								data: this.siteNum
							}
						]
					};					
					
					
				})

			}
		}
	}
</script>
<style lang="scss" scoped>
	.wrap {
		height: 100%;
	}	
	.body {
		height: 100%;
		display: flex;
		flex-direction: column;
	}	
	.charts {
		flex: 1;
	}
</style>